<script lang="ts" setup>
defineOptions({ name: 'CreateAGrid' });

import { ref, onMounted } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";

import CompanyLogoRenderer from "./components/company-logo-renderer.vue";
import MissionResultRenderer from "./components/mission-result-renderer.vue";
const rowData = ref([]);

// Fetch data when the component is mounted
onMounted(async () => {
    rowData.value = await fetchData();
});

const dateFormatter = (params) => {
    return new Date(params.value).toLocaleDateString("en-us", {
        weekday: "long",
        year: "numeric",
        month: "short",
        day: "numeric",
    });
};

const colDefs = ref([
    {
        field: "mission",
        width: 150,
        checkboxSelection: true,
    },
    {
        field: "company",
        width: 130,
        cellRenderer: CompanyLogoRenderer,
    },
    {
        field: "location",
        width: 225,
    },
    {
        field: "date",
        valueFormatter: dateFormatter,
    },
    {
        field: "price",
        width: 130,
        valueFormatter: (params) => {
            return "£" + params.value.toLocaleString();
        },
    },
    {
        field: "successful",
        width: 120,
        cellRenderer: MissionResultRenderer,
    },
    { field: "rocket" },
]);

const defaultColDef = ref({
    filter: true,
    editable: true,
});

const fetchData = async () => {
    const response = await fetch(
        "https://www.ag-grid.com/example-assets/space-mission-data.json",
    );
    return response.json();
};

const onCellValueChanged = function (event) {
    console.log(`New Cell Value: ${event.value}`);
}
const onSelectionChanged = function (event) {
    console.log("Row Selection Event!");
}
</script>

<template>
    <div style="width: 100%;height: 500px">
        <button>新增</button>
        <button>删除</button>
        <ag-grid-vue style="width: 100%; height: 100%" class="ag-theme-quartz" :columnDefs="colDefs" :rowData="rowData"
            :defaultColDef="defaultColDef" :pagination="true" :rowSelection="'multiple'"
            @cell-value-changed="onCellValueChanged" @selection-changed="onSelectionChanged">
        </ag-grid-vue>
    </div>
</template>
